CSS border属性

border属性定义元素的边框，是盒模型的重要组成部分。

基本语法

CSS

.box {
  border: 1px solid #333;
}

/* 等价于 */
.box {
  border-width: 1px;
  border-style: solid;
  border-color: #333;
}

边框宽度

CSS

.box {
  border-width: 1px;           /* 四边相同 */
  border-width: 1px 2px;       /* 上下 左右 */
  border-width: 1px 2px 3px;    /* 上 左右 下 */
  border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
}

边框样式

值	效果
none	无边框
hidden	隐藏边框
solid	实线
dashed	虚线
dotted	点线
double	双线
groove	3D凹槽
ridge	3D凸脊
inset	3D内嵌
outset	3D外凸

CSS

.box {
  border-style: solid;
  border-style: solid dashed;
}

边框颜色

CSS

.box {
  border-color: #333;
  border-color: red;
  border-color: transparent;  /* 透明边框 */
}

单边设置

CSS

.box {
  border-top: 1px solid #333;
  border-right: 2px dashed #666;
  border-bottom: 1px dotted #999;
  border-left: none;
}

边框圆角

CSS

.box {
  border-radius: 10px;
  border-radius: 50%;           /* 圆形 */
  border-radius: 10px 20px;      /* 左上右下 左下右上 */
  border-radius: 10px 20px 30px 40px;
}

/* 单角设置 */
.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

注意：border-style 默认值为 none，必须显式设置才会显示边框。

要点总结

border 简写顺序：width style color
border-style 为必设属性，否则边框不可见
单边属性可独立设置各边样式
border-radius 实现圆角效果

存放路径：articles/CSS/入门/CSS盒模型/CSS border属性.md